<template>
  <div class="Homee">
      <div class="box">
        <h2 class="title">数据统计</h2>
        <div class="but">
          <ul class="but-list">
            <li class="list-li">当日数据：</li>
            <li>新增用户</li>
            <li>新增订单</li>
            <li>新增管理员</li>
          </ul>
          <ul class="but-list1">
            <li class="list-li">总数据：</li>
            <li>注册用户</li>
            <li>订单</li>
            <li>管理员</li>
          </ul>
        </div>
        <div ref="main" class="echarts"></div>
      </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "Homee",
  mounted() {
    this.zhu()
  },
  methods: {
    zhu() {
      var chartDom = this.$refs.main;
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>

<style>
.title {
  text-align: center;
}
.echarts {
  width: 1000px;
  height: 400px;
}
.but {
  width: 847px;
}
.but-list {
  display: flex;
  list-style: none;
  margin-top: 10px;
}
.but-list li {
  width: 120px;
  height: 34px;
  text-align: center;
  line-height: 34px;
  background: #e5e9f2;
  margin-left: 10px;
  border-radius: 5px;
}
.but-list1 {
  display: flex;
  list-style: none;
  margin-top: 15px;
}
.but-list1 li {
  width: 120px;
  height: 34px;
  text-align: center;
  line-height: 34px;
  background: #e5e9f2;
  margin-left: 10px;
  border-radius: 5px;
}
.but-list .list-li {
  background: #ff9800;
}
.but-list1 .list-li {
  background: #20a0ff;
}
</style>